<template>
  <div class="order-container">
    <van-nav-bar title="购票系统" fixed />
    <div v-for="item in orderList" :key="item.id">
         <van-card
    num="1"
    :price="item.price"
    :desc="'购票时间:'+item.ordertime"
    :title="item.movie_name"
    :thumb="item.srcimg"
    >
  <template #tags>
    <van-tag plain type="danger">座位号:{{item.seat}}</van-tag>
    <van-tag plain type="danger">{{item.is_delete ? '已退票' : '已购票'}}</van-tag>
  </template>
  <template #footer>
    <van-button size="mini" type="warning" @click=quit(item.id,$event)  ref="refBtn" v-if="!item.is_delete">退票</van-button>
  </template>
    </van-card>
    </div>
  </div>
</template>

<script>
// import formDate from '@/utils/common.js'
import request from '@/utils/request.js'
export default {
  data() {
    return {
      orderList: []
    }
  },
  created() {
    this.initOrderList()
  },
  methods: {
    // 退票
    quit(ids, e) {
      // 去掉退票按钮的
      e.target.className = 'btnHide'
      this.delOrderList(ids)
      this.deleteSite(ids)
    },
    // 初始化列表，就是点击order页面然后v-for生成多少个东西
    async initOrderList() {
      // axios给的东西里面是data里才有你给我的东西，你得获取这个data重命名res res。data获取你得东西
      const { data: res } = await request.get('/my/order', {
        params: { username: localStorage.getItem('username') }
      })
      if (res.status === 0) {
        this.orderList = res.data
        console.log(res.data)
      }
    },
    // 删除order
    async delOrderList(mid) {
      const { data: res } = await request.get('/my/delete', {
        params: { id: mid }
      })
      console.log(res)
      this.initOrderList()
    },
    // 删除座位
    async deleteSite(mid) {
      // eslint-disable-next-line no-unused-vars
      let mn
      // eslint-disable-next-line no-unused-vars
      let se
      this.orderList.forEach(item => {
        if (item.id === mid) {
          mn = item.movie_name
          se = item.seat
        }
      })
      const { data: res } = await request.get('/movie/sitedelete', {
        params: {
          movie_name: mn,
          seat: se
        }
      })
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.order-container {
  padding-top: 46px;
  padding-bottom: 50px;
}
.btnHide {
  display: none;
}
</style>
